{% extends "templates/main_template.html.j2" %}

{% import "macros/markdown_textarea.html.j2" as MARKDOWN_TEXTAREA %}
{% import "macros/tab_switcher.html.j2" as TAB_SWITCHER %}
{% import "macros/issue_field.html.j2" as ISSUE_FIELD %}
{% import "macros/select_options.html.j2" as SELECT_OPTIONS %}
{% import "macros/modal_confirmation.html.j2" as CONFIRMATION %}
{% import "macros/user_name.html.j2" as USER_NAME %}


{% block title %}{{ target_board.caption|e }} · Доска · Farado{% endblock %}

{% set active_menu = 'boards' %}
{% set value_types = project_manager.value_types() %}
{% set issue_statistics_helper = project_manager.issue_statistics_helper %}
{% set board_statistics_helper = project_manager.board_statistics_helper(target_board) %}
{% set total_progress = [] %}
{% set tab_menu = [
  ['Карточки', 'issues'],
  ['Описание', 'about'],
] %}


{#----------------------------------------------------------------------------#}
{% block styles %}
  {{ SELECT_OPTIONS.STYLES() }}
  {{ MARKDOWN_TEXTAREA.STYLES() }}
  <link href="/static/css/page-toolbar.css" rel="stylesheet" type="text/css" />
  <link href="/static/css/board.css" rel="stylesheet" type="text/css" />
  <link href="/static/css/chart.css" rel="stylesheet" type="text/css" />
{% endblock %}

{#----------------------------------------------------------------------------#}
{% block breadcrumb %}
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">
      {{ target_board.caption|e }}
    </li>
  </ol>
{% endblock %}


{#----------------------------------------------------------------------------#}
{# Таб 1 — Карточки #}
{% block tab_content_1 %}
  <div class="board-container">
    <div class="row h-100 mt-3">
      {% if target_board %}
        {% for board_column in target_board.ordered_board_columns() %}
          <div class="col">
            {% set column_issues = board_statistics_helper.issues_by_state_id(
                    board_column.state_id )
            %}

            {# Наименование столбца #}
              <div class="alert alert-secondary" role="alert">
                {{ board_column.caption|e }} [{{ column_issues|length }}]
              </div>
            {# /Наименование столбца #}

            {# Область карточек #}
              <div class="board-column">
                {% for issue in column_issues %}
                  <div class="card bg-light mb-3">

                    {# Заголовок карточки #}
                      <div class="card-header">
                        <div class="row">

                          {# Ссылка перехода на запрос (issue) #}
                            <div class="col-9">
                              <a href="/issues/issue/{{ issue.id }}">
                                {{ project_manager.issue_kind(issue.issue_kind_id).caption|e }} #{{ issue.id }}
                              </a>

                              {# Индикация — над запросом ведутся работы #}
                                {% set is_active = issue_statistics_helper.is_active_issue(issue) %}
                                {% if is_active %}
                                  <i class="bi bi-hammer"
                                      title="Ведутся работы, запрос(ы) в активных состояниях.">
                                  </i>
                                {% endif %}
                              {# /Индикация — над запросом ведутся работы #}

                            </div>
                          {# /Ссылка перехода на запрос (issue) #}

                          {# Элемент управления для изменения состояния запроса #}
                            <div class="col-3 text-end">
                              {% set state = project_manager.state(issue.state_id) %}
                              <a
                                  id="dropdownMenuState"
                                  data-bs-toggle="dropdown"
                                  aria-expanded="false"><i class="bi bi-chevron-down"></i></a>
                              <ul class="dropdown-menu" aria-labelledby="dropdownMenuState">
                                {% for state in project_manager.new_states_for_issue(issue) %}
                                  <li>
                                    <a  class="dropdown-item"
                                        href="/boards/board/{{ target_board.id -}}
                                          ?function='/issues/issue/{{ issue.id -}}
                                              ?issue_state_id={{ state.id -}}'">
                                      {{- state.caption|e -}}
                                    </a>
                                  </li>
                                {% endfor %}
                              </ul>
                            </div>
                          {# /Элемент управления для изменения состояния запроса #}

                        </div>
                      </div>
                    {# /Заголовок карточки #}

                    {# Прогресс запроса #}
                      {% set progress = project_manager.progress_value(issue.id) %}
                      {% set total_progress = total_progress.append(progress) %}
                      <div
                          class="progress"
                          style="height: 2px;"
                          title="{{ progress }}%">
                        <div
                            class="progress-bar
                              {%- if 100 == progress %} bg-success
                              {%- elif 40 > progress %} bg-warning
                              {%- endif %}"
                            role="progressbar"
                            style="width: {{ progress }}%;"
                            aria-valuenow="{{ progress }}"
                            aria-valuemin="0"
                            aria-valuemax="100"></div>
                      </div>
                    {# /Прогресс запроса #}
                    
                    {# Наименование запроса (issue) #}
                      <div class="card-body">
                        {% set parent_issue = project_manager.issue(issue.parent_id) %}
                        {% if parent_issue %}
                          <a href="/issues/issue/{{ parent_issue.id }}"
                              class="parent-title link"
                              title="{{ parent_issue.caption|e }}">
                            #{{ parent_issue.id }}: {{ parent_issue.caption|e }}
                          </a>
                        {% endif %}

                        <h6 class="card-title">
                          <a href="/issues/issue/{{ issue.id }}">
                            {{ issue.caption|e }}
                          </a>
                        </h6>

                        {# «Аватарки» сотрудников #}
                          <div class="avatars">
                            {% for user_id in issue_statistics_helper.employees_ids(issue) %}
                              {% set employee = project_manager.user(user_id) %}
                              {% if employee %}
                                <a class="parent-title link"
                                    href="/users/user_statistics/{{ employee.id }}">
                                  <div
                                      class="avatar-container avatar-container-background-{{ employee.id % 22 }}"
                                      data-toggle="tooltip"
                                      data-placement="top"
                                      title="{{ USER_NAME.VALUE(employee, user.id) }}">
                                    <div>
                                      {% if employee.first_name and employee.last_name %}
                                        {{ employee.last_name[0] + employee.first_name[0] }}
                                      {% endif %}
                                    </div>
                                  </div>
                                </a>
                              {% endif %}
                            {% endfor %}
                          </div>
                        {# /«Аватарки» сотрудников #}

                      </div>
                    {# /Наименование запроса (issue) #}

                    {# Значения полей запроса (issue) видимых в карточке #}
                      <ul class="list-group list-group-flush">
                        {% for field in issue.fields if field.value and not field.value == '0' %}
                          {% set field_kind = project_manager.field_kind(field.field_kind_id) %}
                          {% if field_kind and field_kind.is_system %}
                            <li class="list-group-item"
                                data-toggle="tooltip"
                                title="{{ field_kind.caption|e }}">
                              {{ ISSUE_FIELD.TAG(
                                  field,
                                  field_kind,
                                  project_manager,
                                  value_types,
                                  user.id )
                              }}
                            </li>
                          {% endif %}
                        {% endfor %}
                      </ul>
                    {# /Значения полей запроса (issue) видимых в карточке #}

                  </div>
                {% endfor %}
              </div>
            {# /Область карточек #}

          </div>
        {% endfor %}
      {% endif %}
    </div>
  </div>
{% endblock tab_content_1 %}


{#----------------------------------------------------------------------------#}
{# Таб 2 — Описание #}
{% block tab_content_2 %}
  <div class="row">

    {# -- Переключатель режима просмотра/изменения доски -- #}
      <div class="col">
        <ul class="nav nav-pills mb-3 justify-content-end" id="pillsTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button
                class="nav-link active"
                id="pills-view-tab"
                data-bs-toggle="pill"
                data-bs-target="#pills-view"
                type="button"
                role="tab"
                aria-controls="pills-view"
                aria-selected="true">Просмотр</button>
          </li>
          <li class="nav-item" role="presentation">
            <button
                class="nav-link {% if not restriction.is_admin %}disabled{% endif %}"
                id="pills-edit-tab"
                data-bs-toggle="pill"
                data-bs-target="#pills-edit"
                type="button"
                role="tab"
                aria-controls="pills-edit"
                {% if not restriction.is_admin %}disabled{% endif %}
                aria-selected="false">Редактор</button>
          </li>
        </ul>
      </div>
    {# -- /Переключатель режима просмотра/изменения доски -- #}

    {# -- Переключаемый контент просмотра/изменения доски -- #}
      <div class="row placeholders">
        <div class="tab-content" id="pillsTabContent">

          {# -- Просмотр данных доски -- #}
            <div
                class="tab-pane fade show active"
                id="pills-view"
                role="tabpanel"
                aria-labelledby="pills-view-tab">

              {# -- Board.description -- #}
                <div class="col-12">
                  <div id="descriptionView"></div>
                </div>
              {# -- /Board.description -- #}

              {# -- Накопительная диаграмма потока -- #}
                <div class="col-12 mb-2">
                  <div class="card">
                    <div class="card-header">
                      <label for="cumulative_flow_diagram_div">
                        Накопительная диаграмма потока
                      </label>
                    </div>
                    <div class="card-body pt-2 pb-2">
                      <div id="cumulative_flow_diagram_div"></div>
                    </div>
                  </div>
                </div>
              {# -- /Накопительная диаграмма потока -- #}

                <div class="row g-2 mb-2">
                  {# -- Диаграмма текущего состояние запросов -- #}
                    <div class="col-md-3 mb-2">
                      <div class="card h-100">
                        <div class="card-header">
                          <label for="cumulative_flow_diagram_div">
                          Текущее состояние запросов
                          </label>
                        </div>
                        <div class="card-body pt-2 pb-2">
                          <div class="chart" id="chart">   
                            <div id="current_states_diagram_div"></div>
                          </div>

                          {# Прогресс доски #}
                            {% if total_progress|length %}
                              {% set progress = (total_progress|sum / total_progress|length)|int %}
                            {% else %}
                              {% set progress = 0 %}
                            {% endif %}
                            <div class="col-12">
                              <div class="progress">
                                <div
                                    class="progress-bar
                                      {%- if 100 == progress %} bg-success
                                      {%- elif 40 > progress %} bg-warning
                                      {%- endif %}"
                                    role="progressbar"
                                    style="width: {{ progress }}%;"
                                    aria-valuenow="{{ progress }}"
                                    aria-valuemin="0"
                                    aria-valuemax="100">{{ progress }}%</div>
                              </div>
                            </div>
                          {# /Прогресс доски #}

                        </div>
                      </div>
                    </div>
                  {# -- /Диаграмма текущее состояние запросов -- #}

                  {# -- Диаграмма распределения времени выполнения -- #}
                    <div class="col-md-9 mb-2">
                      <div class="card h-100">
                        <div class="card-header">
                          <label for="lead_time_distribution_diagram_div">
                            Распределение времени выполнения
                          </label>
                        </div>
                        <div class="card-body pt-2 pb-2">
                          <div id="lead_time_distribution_diagram_div"></div>
                        </div>
                      </div>
                    </div>
                  {# -- /Диаграмма распределения времени выполнения -- #}
                </div>
            </div>
          {# -- /Просмотр данных доски -- #}

          {# -- Изменение данных доски -- #}
            <div
                class="tab-pane fade"
                id="pills-edit"
                role="tabpanel"
                aria-labelledby="pills-edit-tab">

              <form class="row g-3" action="/boards/board/{{ target_board.id }}" method="post">

                {# -- Board.caption -- #}
                  <div class="col-12">
                    <label for="inputCaption" class="form-label">Наименование</label>
                    <input
                        type="text"
                        name="target_board_caption"
                        class="form-control"
                        id="inputCaption"
                        value="{{ target_board.caption|e }}"
                        required>
                  </div>
                {# -- /Board.caption -- #}

                {# -- Board.description -- #}
                  <div class="col-12">
                    <label for="descriptionTab" class="form-label">Описание</label>
                    {{ MARKDOWN_TEXTAREA.INPUT(
                          'descriptionTab',
                          'target_board_description_result',
                          'target_board_description',
                          target_board.description|e ) }}
                  </div>
                {# -- /Board.description -- #}

                {# -- Board.workflow_id -- #}
                  <div class="col-12">
                    <label for="textareaDescription" class="form-label">Рабочий процесс</label>
                    {{ SELECT_OPTIONS.INPUT_SINGLE(
                        data_source = 'workflows',
                        name = 'target_board_workflow_id',
                        project_manager = project_manager,
                        selected_id = target_board.workflow_id)
                    }}
                  </div>
                {# -- /Board.workflow_id -- #}

                {# -- Board.filter -- #}
                  {% set filter_key = target_board.filter_key() %}
                  <div class="col-12">
                    <label for="filter_kinds_ids" class="form-label">Типы запросов</label>
                    {{ SELECT_OPTIONS.INPUT_MULTY(
                        data_source = 'workflows_issue_kinds',
                        name = 'filter_kinds_ids',
                        project_manager = project_manager,
                        selected_ids = target_board.filter_by_key(filter_key.kinds_ids) )
                    }}
                  </div>
                  <div class="col-12">
                    <label for="filter_projects_ids" class="form-label">Проекты</label>
                    {{ SELECT_OPTIONS.INPUT_MULTY(
                        data_source = 'projects',
                        name = 'filter_projects_ids',
                        project_manager = project_manager,
                        selected_ids = target_board.filter_by_key(filter_key.projects_ids) )
                    }}
                  </div>
                  <div class="col-12">
                    <label for="filter_versions_ids" class="form-label">Версии</label>
                    {{ SELECT_OPTIONS.INPUT_MULTY(
                        data_source = 'projects_versions',
                        name = 'filter_versions_ids',
                        project_manager = project_manager,
                        selected_ids = target_board.filter_by_key(filter_key.versions_ids) )
                    }}
                  </div>
                {# -- /Board.filter -- #}

                {# -- Редактор столбцов доски -- #}
                  <table
                      class="table table-striped table-sm table-bordered table-hover"
                      style="width:100%"
                      id="projects_table">
                    <thead>
                      <tr>
                        <th scope="col" style="width: 1%">№</th>
                        <th scope="col">Состояние</th>
                        <th scope="col">Отображаемое наименование</th>
                        <th scope="col">Порядковый номер</th>
                        <th scope="col" style="width: 1%"></th>
                      </tr>
                    </thead>
                    <tbody>
                      {% if target_board %}
                        {% for board_column in target_board.ordered_board_columns() %}
                          <tr id="board_column_row_{{ board_column.id }}">
                            <th scope="row">
                              <input
                                  type="hidden"
                                  name="board_column_id_{{ board_column.id }}"
                                  class="form-control"
                                  value="{{ board_column.id }}">
                              {{ board_column.id }}
                            </th>
                            <td>
                              {{ SELECT_OPTIONS.INPUT_SINGLE(
                                  data_source = 'workflows_states',
                                  name = 'board_column_state_id_' + board_column.id|string,
                                  project_manager = project_manager,
                                  selected_id = board_column.state_id,
                                  need_zero_value = False)
                              }}
                            </td>
                            <td>
                              <input
                                  type="text"
                                  name="board_column_caption_{{ board_column.id }}"
                                  class="form-control"
                                  value="{{ board_column.caption|e }}">
                            </td>
                            <td>
                              <input
                                  type="number"
                                  name="board_column_order_{{ board_column.id }}"
                                  class="form-control"
                                  value="{{ board_column.order }}">
                            </td>
                            <td>
                              <a href="#"
                                  class="btn btn-danger btn-sm"
                                  title="Remove board column"
                                  onclick="$('#board_column_row_{{ board_column.id }}').remove();">
                                <i class="bi bi-trash"></i>
                              </a>
                            </td>
                          </tr>
                        {% endfor %}
                      {% endif %}
                    </tbody>
                    <tfoot>
                      <tr>
                        <th>№</th>
                        <th>Состояние</th>
                        <th>Отображаемое наименование</th>
                        <th>Порядковый номер</th>
                        <th></th>
                      </tr>
                    </tfoot>
                  </table>
                {# -- /Редактор столбцов доски -- #}

                {# -- Элементы управления доской -- #}
                  {% if restriction.is_admin %}
                    <div class="col-12">
                      <div class="clearfix">

                        {# -- Кнопка: удалить -- #}
                          {{ CONFIRMATION.BUTTON(
                              caption = '<i class="bi bi-trash"></i> Удалить',
                              title = 'Удалить данную доску',
                              class = 'btn btn-danger ml-3 float-start',
                              target = 'remove_board_confirmation_'
                                  + target_board.id|string)
                          }}
                          {{ CONFIRMATION.MODAL_WINDOW(
                              title = 'Удаление доски',
                              text = 'Вы уверены, что хотите навсегда удалить доску «'
                                  + target_board.caption|e
                                  + '»?',
                              action_button_href = '/boards/remove_board/'
                                  + target_board.id|string,
                              action_button_text = 'Да',
                              window_id = 'remove_board_confirmation_'
                                  + target_board.id|string)
                          }}
                        {# -- /Кнопка: удалить -- #}


                        {# -- Группа кнопок -- #}
                          <div class="btn-group float-end" role="group">
                            {# -- Кнопка: Создать столбец на доску -- #}
                              {# FIXME: Если добавить новый столбец, все несохранённые
                                        данные доски будут потеряны. #}
                              <a  href="/boards/add_board_column/{{ target_board.id }}"
                                  class="btn btn-outline-dark">
                                Создать столбец на доску
                              </a>
                            {# -- /Кнопка: Создать столбец на доску -- #}

                            {# -- Кнопка: сохранить -- #}
                              <button
                                  type="submit"
                                  id="saveButton"
                                  class="btn btn-success">
                                <i class="bi bi-save"></i> Сохранить
                              </button>
                            {# -- /Кнопка: сохранить -- #}
                          </div>
                        {# -- /Группа кнопок -- #}

                      </div>
                    </div>
                  {% endif %}
                {# -- /Элементы управления доской -- #}

              </form>
            </div>
          {# -- /Изменение данных доски -- #}

        </div>
      </div>
    {# -- /Переключаемый контент просмотра/изменения доски -- #}

  </div>
{% endblock tab_content_2 %}


{#----------------------------------------------------------------------------#}
{% block scripts %}
  {{ MARKDOWN_TEXTAREA.SCRIPTS() }}
  {{ SELECT_OPTIONS.SCRIPTS() }}

  <script src="/static/js/apexcharts/apexcharts.min.js"></script>

  <script>
    document_ready_function = function() {
      {{ TAB_SWITCHER.DOCUMENT_READY_SCRIPT('pillsTab') }}
      {{ TAB_SWITCHER.DOCUMENT_READY_SCRIPT('descriptionTab') }}

      markdownToHtml('target_board_description', 'descriptionView');
      markdownToHtml('target_board_description', 'target_board_description_result');

      $(function () {
        $('[data-toggle="tooltip"]').tooltip()
      })

      // Формирование накопительной диаграммы потока
      {% set cumulative_flow_diagram_data = board_statistics_helper.cumulative_flow_diagram_data() %}
      var cumulative_flow_diagram_options = {
        series: {{ cumulative_flow_diagram_data }},
        chart: {
          type: 'area',
          height: 350,
          stacked: true,
          defaultLocale: 'ru',
          locales: [
            {
              "name": "ru",
              "options": {
                "months": [
                  "Январь",
                  "Февраль",
                  "Март",
                  "Апрель",
                  "Май",
                  "Июнь",
                  "Июль",
                  "Август",
                  "Сентябрь",
                  "Октябрь",
                  "Ноябрь",
                  "Декабрь"
                ],
                "shortMonths": [
                  "Янв",
                  "Фев",
                  "Мар",
                  "Апр",
                  "Май",
                  "Июн",
                  "Июл",
                  "Авг",
                  "Сен",
                  "Окт",
                  "Ноя",
                  "Дек"
                ],
                "days": [
                  "Воскресенье",
                  "Понедельник",
                  "Вторник",
                  "Среда",
                  "Четверг",
                  "Пятница",
                  "Суббота"
                ],
                "shortDays": ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
                "toolbar": {
                  "exportToSVG": "Сохранить SVG",
                  "exportToPNG": "Сохранить PNG",
                  "exportToCSV": "Сохранить CSV",
                  "menu": "Меню",
                  "selection": "Выбор",
                  "selectionZoom": "Выбор с увеличением",
                  "zoomIn": "Увеличить",
                  "zoomOut": "Уменьшить",
                  "pan": "Перемещение",
                  "reset": "Сбросить увеличение"
                }
              }
            }
          ]
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        colors: [
          '#008FFB',
          '#00E396',
          '#FEB019',
          '#FF4560',
          '#775DD0',
          '#2B908F',
          '#2E294E',
          '#662E9B',
          '#F86624',
          '#5C4742',
          '#F9A3A4',
          '#A5978B',
          '#8D5B4C',
          '#4CAF50',
          '#A300D6'
        ],
        fill: {
          type: 'gradient',
          gradient: {
            opacityFrom: 0.6,
            opacityTo: 0.8,
          }
        },
        legend: {
          position: 'top',
          horizontalAlign: 'left'
        },
        xaxis: {
          type: 'datetime'
        },
      };
      var cumulative_flow_diagram = new ApexCharts(
        document.querySelector("#cumulative_flow_diagram_div"),
        cumulative_flow_diagram_options
      );
      cumulative_flow_diagram.setLocale('ru');
      cumulative_flow_diagram.render();

      // Формирование диаграммы текущего состояния запросов
      {% set current_states_diagram_data = board_statistics_helper.current_states_diagram_data() %}
      var current_states_diagram_options = {
        series: [
          {
            data: [{{ current_states_diagram_data.values()|join(',') }}]
          }
        ],
        chart: {
          type: 'bar',
        },
        plotOptions: {
          bar: {
            borderRadius: 4,
            horizontal: true,
          }
        },
        colors: ['#00E396'],
        dataLabels: {
          enabled: false
        },
        xaxis: {
          categories: ['{{ current_states_diagram_data.keys()|join("','") }}'],
        }
      };
      var current_states_diagram = new ApexCharts(
        document.querySelector("#current_states_diagram_div"),
        current_states_diagram_options
      );
      current_states_diagram.render();

      // Формирование диаграммы распределения времени выполнения
      {% set lead_time_finished, lead_time_in_progress, days =
              board_statistics_helper.lead_time_distribution_diagram_data() %}
      var lead_time_distribution_diagram_options = {
        series: [
          {
            name: 'Выполнено',
            data: [{{ lead_time_finished|join(',') }}]
          },
          {
            name: 'В работе',
            data: [{{ lead_time_in_progress|join(',') }}]
          }
        ],
        chart: {
          type: 'bar',
          height: 350
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '55%',
            endingShape: 'rounded'
          },
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          title: {
            text: 'Количество дней'
          },
          categories: [{{ days|join(',') }}],
        },
        yaxis: {
          title: {
            text: 'Количество запросов'
          },
          labels: {
            formatter: function(val) {
              return val.toFixed(0)
            }
          }
        },
        fill: {
          opacity: 1
        },
        legend: {
          position: 'top',
          horizontalAlign: 'left'
        },
        tooltip: {
          y: {
            formatter: function(val) {
              return val
            }
          }
        }
      };
      var lead_time_distribution_diagram = new ApexCharts(
        document.querySelector("#lead_time_distribution_diagram_div"),
        lead_time_distribution_diagram_options
      );
      lead_time_distribution_diagram.render();

    }
  </script>
{% endblock %}
